<template>
	<div class="container" :class="{ 'sign-up-mode': signUpMode }">
		<div class="forms-container">
			<div class="signin-signup">
				<login-form :loginForm="loginForm" :loginFormRules="loginFormRules" ></login-form>
				<register-form :registerForm="registerForm" :registerFormRules="registerFormRules"></register-form>
			</div>
		</div>
		<div class="panels-container">
			<div class="panel left-panel">
				<div class="content">
					<h3>学习是为了有更多的选择,让生活变的更美好!</h3>
					<p>何以解忧,唯有编程</p>
					<button @click="signUpMode = !signUpMode" class="btn transparent">
						注册
					</button>
				</div>
				<img src="@/assets/img/log.svg" class="image" alt="" />
			</div>
			<div class="panel right-panel">
				<div class="content">
					<h3>以人为镜,可明得失, 以代码为镜,可通逻辑!</h3>
					<p>学习编程,让你的生活更有趣</p>
					<button @click="signUpMode = !signUpMode" class="btn transparent">
						登录
					</button>
				</div>
				<img src="@/assets/img/register.svg" class="image" alt="" />
			</div>
		</div>
	</div>
</template>

<script>
	import { ref } from "vue"
	import { loginForm, loginFormRules } from "../utils/loginValidators.ts"
	import { registerForm, registerFormRules } from "../utils/registerValidators.ts"
	import LoginForm from "../components/LoginForm.vue"
	import RegisterForm from "../components/registerForm.vue"
	export default {
		name: 'Login',
		components: { LoginForm, RegisterForm },
		setup () {
			const signUpMode = ref(false)
			return { signUpMode, loginForm, loginFormRules, registerForm, registerFormRules }
		}
	}
</script>

<style>
</style>
